<template>
	<view class="myTask">
		<view class="myTask-headerBtn">
			<view class="myTask-headerBtn-btn btn1 publicColor" :style="current==0 ? 'color:#007aff ;' : ''" @click="changeCurrent(0)">未审核</view>
			<view class="myTask-headerBtn-btn" :style="current==1 ? 'color:#007aff ;' : ''" @click="changeCurrent(1)">已审核</view>
		</view>
		<view class="myTask">
			<view class="myTask-list">
				<view class="myTask-list-item" v-for="item in detailList" @click="getDetail(item)">
					<view class="myTask-list-item-title">{{item.tarkName}}</view>
					<view class="myTask-list-item-title1">发布人：{{item.leader}} </view>
					<view class="myTask-list-item-title1">联系电话：{{item.linkPhone}} </view>
					<view class="myTask-list-item-time">
						{{ item.createTime | dateformat('yyyy-MM-DD  HH:mm') }}
					</view>
					<view class="myTask-list-item-urgent" v-show="item.isUrgent==1">
						紧急
					</view>
				</view>
			</view>
		</view>
		<u-loading-page :loading="isShowLoading" bg-color="rgba(4,4,15,0.4000)">加载中...</u-loading-page>
	</view>
</template>

<script>
	import { getReviewTasksList } from "@/api/otherTaskApi.js";
	export default {
		data() {
			return {
				current:0,
				detailList:[],
				isShowLoading:false,
				
				// 分页加载数据
				submitList:{
					pageNum:1,
					pageSize:10,
					isAuth:0
				},
				// 分页总条数
				pageCount:0,
			}
		},
		onLoad() {

		},
		// 触底加载
		onReachBottom() {
			if(this.submitList.pageNum < this.pageCount){
				this.submitList.pageNum++;
				this.submitList.isAuth = this.current;
				this.getReviewTasksList(this.submitList);
			}
		},
		onShow() {
			// 0 未审核 1 审核
			this.current = 0;
			this.getReviewTasksList(this.submitList);
		},
		methods: {
			changeCurrent(index){
				this.current = index;
				let data = {
					pageNum:1,
					pageSize:10,
					isAuth:index
				};
				this.getReviewTasksList(data);
			},
			async getReviewTasksList(data){
				this.isShowLoading = true;
				let res = await getReviewTasksList(data);
				if(res.code==200){
					if(data.pageNum==1){
						this.detailList = res.rows;
						this.pageCount = Math.ceil(Number(res.total) / Number(this.submitList.pageSize));
					}else{
						if(res.rows.length>0){
							this.detailList = this.detailList.concat(res.rows);
						}
					}
					this.isShowLoading = false;
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			getDetail(item){
				if(this.current==0){
					uni.navigateTo({
						url:'/pages/stock/reviewTask/reviewTaskDetail?isAuth=0&itemDetail='+encodeURIComponent(JSON.stringify(item))
					})
				}else{
					uni.navigateTo({
						url:'/pages/stock/reviewTask/reviewTaskDetail?isAuth=1&itemDetail='+encodeURIComponent(JSON.stringify(item))
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{background:#F2F2F2 ;width:100%;}
	.myTask{
		&-headerBtn{
			width:100%;
			height:88rpx;
			background:white;
			display: flex;
			position: fixed;
			top:88rpx;
			z-index:99;
			&-btn{
				width:50%;
				line-height: 88rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}
			.btn1{
				border-right:2rpx solid #F2F2F2;
			}
		}
		&-list{
			padding:100rpx 0;
			width:690rpx;
			margin:0 auto;
			&-item{
				width:100%;
				height:260rpx;
				background:white;
				border-radius: 24rpx;
				margin-top:20rpx;
				overflow: hidden;
				position: relative;
				&-title{
					width:70%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 600;
					font-size: 30rpx;
					margin-top:20rpx;
					padding:10rpx 30rpx;
				}
				&-title1{
					width:70%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 400;
					font-size: 28rpx;
					padding:10rpx 30rpx;
				}
				&-time{
					font-weight: 400;
					font-size: 26rpx;
					color: #cacaca;
					padding:10rpx 30rpx;
					text-align: right;
				}
				&-urgent{
					position: absolute;
					top:0;
					right:0;
					padding:15rpx;
					background:red;
					color: white;
					font-size: 26rpx;
					border-radius: 0 0 0 24rpx;
				}
			}
		}
	}
</style>